<!--
  智慧社区管理系统 - 角色详情弹窗
  @author Wu.Liang
  @date 2024-01-01
  @updated 2024-12-21 - 完善角色详情弹窗功能
-->
<template>
    <el-dialog
        v-model="dialogVisible"
        title="角色详情"
        width="700px"
        :close-on-click-modal="false"
        @close="handleClose"
    >
        <div class="role-detail" v-loading="loading">
            <div v-if="roleData" class="detail-content">
                <!-- 基本信息 -->
                <el-card class="detail-card" shadow="never">
                    <template #header>
                        <div class="card-header">
                            <el-icon><User /></el-icon>
                            <span>基本信息</span>
                        </div>
                    </template>
                    
                    <el-descriptions :column="2" border>
                        <el-descriptions-item label="角色ID">
                            {{ roleData.id }}
                        </el-descriptions-item>
                        <el-descriptions-item label="角色编码">
                            <el-tag type="info" size="small">{{ roleData.roleCode }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="角色名称">
                            <strong>{{ roleData.roleName }}</strong>
                        </el-descriptions-item>
                        <el-descriptions-item label="状态">
                            <el-tag :type="getStatusTagType(roleData.status)" size="small">
                                {{ getStatusText(roleData.status) }}
                            </el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="排序号">
                            {{ roleData.sortOrder }}
                        </el-descriptions-item>
                        <el-descriptions-item label="创建时间">
                            {{ formatDate(roleData.createTime) }}
                        </el-descriptions-item>
                        <el-descriptions-item label="更新时间">
                            {{ formatDate(roleData.updateTime) }}
                        </el-descriptions-item>
                        <el-descriptions-item label="角色描述" :span="2">
                            {{ roleData.description || '暂无描述' }}
                        </el-descriptions-item>
                        <el-descriptions-item label="备注" :span="2">
                            {{ roleData.remark || '暂无备注' }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>

                <!-- 权限信息 -->
                <el-card class="detail-card" shadow="never">
                    <template #header>
                        <div class="card-header">
                            <el-icon><Setting /></el-icon>
                            <span>权限信息</span>
                            <el-button 
                                type="primary" 
                                link 
                                size="small" 
                                @click="refreshPermissions"
                                :loading="permissionLoading"
                            >
                                刷新权限
                            </el-button>
                        </div>
                    </template>
                    
                    <div class="permission-info">
                        <div v-if="Array.isArray(permissionList) && permissionList.length > 0" class="permission-list">
                            <div 
                                v-for="permission in permissionList" 
                                :key="permission.id"
                                class="permission-item"
                            >
                                <el-icon class="permission-icon" :class="getPermissionIconClass(permission.type)">
                                    <component :is="getPermissionIcon(permission.type)" />
                                </el-icon>
                                <div class="permission-content">
                                    <div class="permission-name">{{ permission.permissionName }}</div>
                                    <div class="permission-code">{{ permission.permissionCode }}</div>
                                </div>
                                <el-tag 
                                    size="small" 
                                    :type="getPermissionTypeTag(permission.type)"
                                >
                                    {{ getPermissionTypeText(permission.type) }}
                                </el-tag>
                            </div>
                        </div>
                        <el-empty 
                            v-else 
                            description="暂无权限信息"
                            :image-size="100"
                        />
                    </div>
                </el-card>

                <!-- 统计信息 -->
                <el-card class="detail-card" shadow="never">
                    <template #header>
                        <div class="card-header">
                            <el-icon><DataAnalysis /></el-icon>
                            <span>统计信息</span>
                        </div>
                    </template>
                    
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <div class="stat-item">
                                <div class="stat-number">{{ menuPermissionCount }}</div>
                                <div class="stat-label">菜单权限</div>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
            
            <el-empty v-else description="角色信息不存在" />
        </div>
        
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">关闭</el-button>
                <el-button type="primary" @click="handleEdit" v-if="roleData">
                    编辑角色
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { 
    User, 
    Setting, 
    DataAnalysis,
    Menu, 
    Operation, 
    Key, 
    Folder
} from '@element-plus/icons-vue'
import type { RoleInfo, PermissionTree } from '@/api/role'
import { getPermissionsByRoleId } from '@/api/role'

// Props
interface Props {
    modelValue: boolean
    roleData?: RoleInfo | null
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: false,
    roleData: null
})

// Emits
const emit = defineEmits<{
    'update:modelValue': [value: boolean]
    'edit': [role: RoleInfo]
}>()

// 响应式数据
const loading = ref(false)
const permissionLoading = ref(false)
const permissionList = ref<PermissionTree[]>([])

// 计算属性
const dialogVisible = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
})

const menuPermissionCount = computed(() => {
    return (permissionList.value || []).filter(p => p.type === 1).length
})

// 监听弹窗显示
watch(() => props.modelValue, (visible) => {
    if (visible && props.roleData) {
        fetchRolePermissions()
    }
})

// 获取角色权限
const fetchRolePermissions = async () => {
    if (!props.roleData?.id) {
        permissionList.value = []
        return
    }
    try {
        permissionLoading.value = true
        const response = await getPermissionsByRoleId(props.roleData.id)
        permissionList.value = Array.isArray(response.data) ? response.data : []
    } catch (error: any) {
        permissionList.value = []
        ElMessage.error({ message: '获取角色权限失败: ' + error.message, type: 'error' })
    } finally {
        permissionLoading.value = false
    }
}

// 刷新权限
const refreshPermissions = () => {
    fetchRolePermissions()
}

// 获取权限图标
const getPermissionIcon = (type: number) => {
    switch (type) {
        case 1: return Menu // 菜单
        case 2: return Operation // 按钮
        case 3: return Key // API
        default: return Folder
    }
}

// 获取权限图标样式
const getPermissionIconClass = (type: number) => {
    switch (type) {
        case 1: return 'icon-menu'
        case 2: return 'icon-button'
        case 3: return 'icon-api'
        default: return 'icon-default'
    }
}

// 获取权限类型标签
const getPermissionTypeTag = (type: number) => {
    switch (type) {
        case 1: return 'primary'
        case 2: return 'success'
        case 3: return 'warning'
        default: return 'info'
    }
}

// 获取权限类型文本
const getPermissionTypeText = (type: number) => {
    switch (type) {
        case 1: return '菜单'
        case 2: return '按钮'
        case 3: return 'API'
        default: return '未知'
    }
}

// 工具函数
const getStatusTagType = (status: number) => {
    return status === 0 ? 'success' : 'danger'
}

const getStatusText = (status: number) => {
    return status === 1 ? '启用' : '禁用'
}

const formatDate = (date: string) => {
    if (!date) return '-'
    return new Date(date).toLocaleString('zh-CN')
}

// 关闭弹窗
const handleClose = () => {
    dialogVisible.value = false
    permissionList.value = []
}

// 编辑角色
const handleEdit = () => {
    if (props.roleData) {
        emit('edit', props.roleData)
        handleClose()
    }
}
</script>

<style lang="scss" scoped>
.role-detail {
    .detail-content {
        .detail-card {
            margin-bottom: 20px;
            border-radius: 8px;

            &:last-child {
                margin-bottom: 0;
            }

            .card-header {
                display: flex;
                align-items: center;
                gap: 8px;
                font-weight: 600;
                color: #303133;

                .el-icon {
                    font-size: 16px;
                    color: #409eff;
                }
            }

            .permission-info {
                .permission-list {
                    .permission-item {
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        padding: 12px;
                        margin-bottom: 8px;
                        background: #f8f9fa;
                        border-radius: 6px;
                        transition: all 0.3s ease;

                        &:hover {
                            background: #e9ecef;
                        }

                        &:last-child {
                            margin-bottom: 0;
                        }

                        .permission-icon {
                            font-size: 18px;
                            flex-shrink: 0;
                            
                            &.icon-menu {
                                color: #409eff;
                            }
                            
                            &.icon-button {
                                color: #67c23a;
                            }
                            
                            &.icon-api {
                                color: #e6a23c;
                            }
                            
                            &.icon-default {
                                color: #909399;
                            }
                        }

                        .permission-content {
                            flex: 1;
                            min-width: 0;

                            .permission-name {
                                font-size: 14px;
                                font-weight: 500;
                                color: #303133;
                                margin-bottom: 4px;
                            }

                            .permission-code {
                                font-size: 12px;
                                color: #909399;
                                font-family: 'Courier New', monospace;
                            }
                        }
                    }
                }
            }

            .stat-item {
                text-align: center;
                padding: 20px;
                background: #f8f9fa;
                border-radius: 8px;

                .stat-number {
                    font-size: 24px;
                    font-weight: 600;
                    color: #409eff;
                    margin-bottom: 8px;
                }

                .stat-label {
                    font-size: 14px;
                    color: #606266;
                }
            }
        }
    }
}

.dialog-footer {
    text-align: right;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

:deep(.el-descriptions__label) {
    font-weight: 500;
    color: #606266;
}

:deep(.el-descriptions__content) {
    color: #303133;
}
</style> 